<template>
  <Panel title="疫情车辆来源" class="epidemic-car-source" v-bind="props.config">
    <!-- 省维度 -->
    <div class="source-content" v-if="isProvince">
      <!-- 出入省总统计 -->
      <div class="boundary-total">
        <div class="in-province-total">
          <svg-icon icon-class="in-province" class="boundary-car"></svg-icon>
          <div class="summary">
            <div>入省总计</div>
            <div>
              <span class="number">231,312</span>
              <span>辆</span>
            </div>
          </div>
        </div>
        <div class="out-province-total">
          <svg-icon icon-class="out-province" class="boundary-car"></svg-icon>
          <div class="summary">
            <div>出省总计</div>
            <div>
              <span class="number">231,312</span>
              <span>辆</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 省界详细统计 -->
      <div class="province-statistical">
        <div v-for="i in 4" class="city-border" :key="i">
          <span :class="i === activeIndex ? 'active city-border-name' : 'city-border-name'"
@click="handleClick(i)"
            >苏沪省界</span
          >
          <div class="statistics-content">
            <div class="province-detail">
              <span class="go-out">出</span>
              <span class="number">22,2222</span>
              <span class="unit">辆</span>
            </div>
            <div class="province-detail">
              <span class="come-in">入</span>
              <span class="number">33,2222</span>
              <span class="unit">辆</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 市维度 -->
    <div class="source-content" @click="handleClick" v-else>
      <div class="epidemic-progress">
        <Progress
          :progress="progressState.gsZb"
          style="height: 16px"
          color="B"
          title="高速"
          :number="progressState.gsEpidemicSourceFlow"
        >
        </Progress>
        <SequentialSame
          :data="{ ring: progressState.glEpidemicFlowHb, same: progressState.glEpidemicFlowTb }"
          class="epidemic-sequential-same"
        ></SequentialSame>
      </div>
      <div class="epidemic-progress">
        <Progress
          :progress="progressState.glZb"
          style="height: 16px"
          color="G"
          title="公路"
          :number="progressState.glEpidemicSourceFlow"
        >
        </Progress>
        <SequentialSame
          :data="{ ring: progressState.glEpidemicFlowHb, same: progressState.glEpidemicFlowTb }"
          class="epidemic-sequential-same"
        >
        </SequentialSame>
      </div>
    </div>
  </Panel>
</template>

<script>
export default {
  name: 'EpidemicCarSource'
}
</script>
<script setup>
/**
 * @desc 疫情车辆来源(二级)
 * @auther 邓清波
 * @date 2022/10/24
 **/

import Progress from '../../components/progress/index.vue'
import SequentialSame from '../../components/sequential-same/index.vue'
import Panel from '../../components/panel'
import epidemicApi from '../../api/epidemic'
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import useWatchStore from '@/hooks/useWatchStore'

const store = useStore()
const emit = defineEmits(['setDetail'])
const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => ({})
  }
})
// 进度条与环比
const progressState = ref({})

const isProvince = computed(() => store.state.config.isProvince)
const state = ref({})
const activeIndex = ref(null)

useWatchStore(getData)

/**
 * 根据省/是维度获取疫情车辆来源数据
 */
function getData(argParams) {
  const params = {
    roadType: argParams.roadType,
    province: '32',
    city: argParams.isProvince ? null : argParams.areaCode
  }

  // 市维度获取数据
  if (!isProvince.value) {
    epidemicApi.getCarSourceByCity(params).then(res => {
      progressState.value = res.data || {}
      const gsEpidemicSourceFlow = res.data.gsEpidemicSourceFlow || 0
      const glEpidemicSourceFlow = res.data.glEpidemicSourceFlow || 0

      progressState.value.glZb = (glEpidemicSourceFlow / (gsEpidemicSourceFlow + glEpidemicSourceFlow)) * 100 // 公路进度条占比
      progressState.value.gsZb = (gsEpidemicSourceFlow / (gsEpidemicSourceFlow + glEpidemicSourceFlow)) * 100 // 高速进度条占比
    })
    return
  }

  // 省维度获取数据  暂定
  epidemicApi.getCarSourceByProvincial(params).then(res => {
    console.log(res)
  })
}

function handleClick(i) {
  i && (activeIndex.value = i)
  emit('setDetail', {
    type: 'epidemic-car-source',
    actions: 'click',
    data: i,
    config: props.config.detailConfig
  })
}
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.source-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 15px;

  .epidemic-progress {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;

    .epidemic-sequential-same {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;

      /deep/ .sequential {
        margin-right: 15px;
      }
    }
  }

  .boundary-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;

    .in-province-total,
    .out-province-total {
      width: 43%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;

      .boundary-car {
        width: 42px;
        height: 42px;
      }
    }

    .summary {
      flex: 1;
      margin-left: 10px;
    }

    .in-province-total {
      .number {
        color: @primary-color;
        line-height: 23px;
        font-size: 26px;
      }
    }

    .out-province-total {
      .number {
        color: #28c073;
        line-height: 23px;
        font-size: 26px;
      }
    }
  }

  .province-statistical {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 110px;
    overflow-y: auto;

    .city-border {
      width: 43%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 7px;
      cursor: pointer;

      .city-border-name {
        width: 42px;
        height: 42px;
        background: rgba(255, 255, 255, 0);
        border: 1px solid @primary-color;
        border-radius: 6px;
        text-align: center;
        padding: 2px;
        line-height: 15px;
        align-items: center;
        display: flex;
        box-shadow: inset 0 0 5px @primary-color;
        color: @primary-color;
      }

      .active {
        background: #266bf4;
        color: #fff;
      }

      .statistics-content {
        flex: 1;
        margin-left: 11px;
      }
    }
  }

  .go-out,
  .come-in {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }

  .go-out {
    border: 1px solid #28c073;
    color: #2fc576;
  }

  .come-in {
    border: 1px solid @primary-color;
    color: @primary-color;
  }

  .province-detail {
    display: flex;
    align-items: center;

    .number {
      font-size: 18px;
      line-height: 14px;
      margin: 0 5px;
    }
  }

  .unit {
    font-size: 14px;
  }
}
</style>
